<template>
	<view class="work-container">
		<!-- 搜索栏 -->
		<uni-search-bar @confirm="search" :focus="false" v-model="postdata.communityName" @input="input"
			@cancel="cancel" @clear="clear" placeholder="请输入要查询的小区名称">
		</uni-search-bar>
		<!-- 下拉选择框 -->
		<view class="statusSearch">

			<!-- 时间选择器 -->
			<uni-datetime-picker class="unisheetSearch" type="date" :clear-icon="true" :value="postdata.orderStartTime"
				@maskClick="maskClicke" @change="timechange" placeholder="请选择工单时间" />

			<!-- 宽带状态栏下拉选择框 -->
			<uni-data-select class="unisheetSearch" v-model="postdata.broadbandStatus" :localdata="range"
				@change="changeMenu" placeholder="宽带状态选择" :clear="true" />

			<!-- 工单状态下拉选择框 -->
			<uni-data-select class="unisheetSearch" v-model="postdata.workOrderStatus" :localdata="OrderStatus"
				@change="changeOrderMenu" placeholder="工单状态" :clear="false" />

		</view>
		<view v-for="(value, name ,index) in datas" :key="index">
			<OrderCard :data="value"></OrderCard>
		</view>
	</view>
</template>

<script>
	/**
	 * 工单模块
	 */
	// 导入 api 进行接口的调用
	import {
		getworkOrderList
	} from '@/api/broad/broadapi.js'
	// 导入 logs 文件中的函数,用于判断环境是否为开发环境,并且打印出相关数据
	import {
		logs
	} from '@/utils/tools.js'
	// 导入相关组件
	import OrderCard from '@/pages/common/commoncomp/OrderCard.vue'
	export default {
		components: {
			OrderCard
		},
		// 数据
		data() {
			return {
				// 总数据数
				totalPage: 0,
				// 
				swiperDotIndex: 0,
				// 
				data: [],
				// 
				datas: [],
				// 
				value: null,
				//
				broadStatusValue: null,
				// 
				OrderStatusValue: null,
				// 
				range: [{
						value: 0,
						text: "关停"
					},
					{
						value: 1,
						text: "开通"
					},
				],
				// 
				OrderStatus: [{
						value: 1,
						text: "进行中"
					},
					{
						value: 2,
						text: "已结束"
					},
				],
				// 
				single: '',
				// 
				searchValue: '',
				postdata: {
					broadbandNumber: "",
					broadbandStatus: 0,
					buildingNumber: "",
					communityName: "",
					floorNumber: "",
					orderEndTime: "",
					orderStartTime: "",
					roomNumber: "",
					workOrderStatus: 2
				}
			}
		},

		computed: {
			newObj() {
				return JSON.parse(JSON.stringify(this.postdata))
			}
		},
		watch: {
			newObj: {
				handler: function(newValue, oldValue) {
					console.log('index.vue:[watch]104->', 'newValue:', newValue, 'oldValue:', oldValue)
					console.log(this.postdata.broadbandStatus)
					console.log(this.postdata.workOrderStatus)
					this.getData(1, 100, this.postdata)
				},
				deep: true,
			},

		},
		created() {
			this.getTotalData(1, 10, this.postdata).then(res => {
				for (let i = 0; i <= this.totalPage; i++) {
					this.getData(i, 10, this.postdata)
				}
			})
		},
		// 挂载钩子函数
		mounted() {

		},
		// 激活钩子函数
		activated() {
			for (let i = 1; i <= this.totalPage; i++) {
				this.getData(i, 10, this.postdata)
			}
		},
		// 函数
		methods: {
			/**
			 * @Title 获取总页数
			 * @description
			 * 
			 */
			async getTotalData(pageNum, pageSize, Datas) {
				await getworkOrderList(pageNum, pageSize, Datas).then(res => {
					console.log(res)
					this.totalPage = Math.round(res.total / 10)
					console.log('getTotalData this.totalPage:', this.totalPage);
				})
			},
			/**
			 * @Title 搜索栏的搜索函数
			 * @description 
			 * @param {Object} res
			 */
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},

			/**
			 * @Title 搜索栏的搜索函数
			 * @description 双向绑定,下面的 res 值是实时的
			 * @param {Object} res
			 */
			input(res) {
				this.datas = []
				console.log(this.postdata.communityName)
			},

			/**
			 * @Title 搜索栏的清除的函数
			 * @description 
			 * @param {Object} res
			 */
			clear(res) {
				this.datas = []
				this.postdata.communityName = ""
			},

			/**
			 * @Title 搜索栏的取消函数
			 * @description 
			 */
			cancel(res) {
				this.datas = []
				this.postdata.communityName = " "
				// uni.showToast({
				// 	title: '点击取消，输入值为：' + res.value,
				// 	icon: 'none'
				// })
			},

			/**
			 * @description 宽带类型下拉菜单的选择函数
			 */
			changeMenu(e) {
				this.datas = []
				this.postdata.broadbandStatus = e
				console.log("changeMenu e:", e, this.postdata);
			},

			/**
			 * @description 工单类型下拉菜单的选择函数
			 */
			changeOrderMenu(e) {
				this.datas = []
				this.postdata.workOrderStatus = e
				console.log("changeOrderMenu e:", e, this.postdata);
			},

			/**
			 * @description 时间选择器的函数
			 */
			maskClicke(e) {
				this.postdata.orderStartTime = e
				console.log('maskClick事件:', e);
			},
			timechange(e) {
				this.datas = []
				this.postdata.orderStartTime = e
				console.log('timechange事件:', e, this.postdata);
			},
			getData(pageNum, pageSize, Datas) {
				getworkOrderList(pageNum, pageSize, Datas).then(res => {
							if (Array.isArray(res.rows)) {
								for (const resData in res.rows) {
									this.datas.push(res.rows[resData])
								}
							}
						}
					)},

					onPullDownRefresh() {
						console.log('refresh');
						this.$modal.showToast('刷新成功~')
						setTimeout(function() {
							uni.stopPullDownRefresh();
						}, 1000);
					}
			}
		}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	.statusSearch {
		display: flex;
		flex-direction: row;
	}

	.unisheetSearch {
		width: 34%;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}
</style>